<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>科研项目追踪</title>
    <!-- LOADING STYLESHEETS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<!-- LOGO -->
<#--<div class="container">-->
<#--    <div class="row">-->
<#--        <div class="header">-->
<#--            <div class="logo">-->
<#--                &lt;#&ndash;        <img src="images/logo.png" alt="logo">&ndash;&gt;-->
<#--                场景三-->
<#--            </div>-->
<#--        </div>-->
<#--    </div>-->
<#--</div>-->
<!-- END LOGO-->

<!-- TOP NAVIGATION -->
<div class="container-fluid">
    <div class="navigation">
        <div class="row">
            <ul class="topnav">
                <li></li>
                <li>
                    <a href="/scidata/team">
                        <i class="fa fa-search-plus"></i>科研团队识别</a>
                </li>
                <li>
                    <a href="/scidata/project/all">
                        <i class="fa fa-location-arrow"></i>项目成果追踪</a>
                </li>
                <li>
                    <a href="/scidata/paper">
                        <i class="fa fa-book"></i>学科交叉分析</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- END TOP NAVIGATION -->

<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
    <div class="container" style="padding-top: 20px; padding-bottom: 20px;">
        <div class="row text-center margin-bottom-20">
            <h1 class="white">科研项目追踪</h1>
        </div>
        <br>
        <div class="row search-row">
            <label for="keyword-detail"></label><input type="text" class="search" placeholder="请输入搜索内容"
                                                       id="keyword-detail" required maxlength="10">
            <button class="buttonsearch btn btn-info btn-lg" onclick="search()">搜索</button>
        </div>
    </div>
</div>
<!-- END SEARCH FIELD AREA -->

<!-- MAIN SECTION -->
<div class="featured-area-default padding-30">
    <div class="row">
        <div class="col-md-7 padding-20">
            <div class="row">
                <!-- 基本信息  -->
                <div class="panel panel-default">
                    <div class="article-heading">${project.title}</div>
                    <div class="article-content">
                        <h3>基本信息</h3>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                批准号：${project.approval}
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                项目类型：${project.funding}
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                学科分类：<#if project.branch??>${project.branch}<#else>暂无分类</#if>
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                项目负责人：${project.manager}
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                依托单位：${project.institute}
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                项目经费：${project.money}万
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                批准日期：${project.origin?c?substring(0,4)}年${project.origin?c?substring(4,6)}月
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-20">
                            <div class="fat-content-small padding-left-30">
                                结题日期：${project.deadline?c?substring(0,4)}年${project.origin?c?substring(4,6)}月
                            </div>
                        </div>
                    </div>
                    <div class="article-content">
                        <div class="article-tags">
                            <b>关键词</b>
                            <#list project.keyword?replace(";", "；")?split("；") as key>
                                <#if key!="" >
                                    <a class="btn btn-default btn-o btn-sm">${key}</a>
                                </#if>
                            </#list>
                        </div>
                    </div>
                    <div class="article-content">
                        <div class="article-tags">
                            <#if project.keyword_en?replace("；", ";")?has_content>
                                <b>英文关键词</b>
                                <#list project.keyword_en?replace("；", ";")?split(";") as key>
                                    <#if key!="" >
                                        <a class="btn btn-default btn-o btn-sm">${key}</a>
                                    </#if>
                                </#list>
                            </#if>
                        </div>
                    </div>
                </div>
                <!-- END 基本信息 -->

                <!-- 项目摘要  -->
                <div class="panel panel-default">
                    <div class="article-content">
                        <h3>项目摘要</h3>
                    </div>
                    <div class="article-content">
                        <div class="article-tags">
                            <h4><b>中文摘要</b></h4>
                            <p class="fb-sub-heading">${project.summary}</p>
                        </div>
                    </div>
                    <div class="article-content">
                        <div class="article-tags">
                            <#if project.summary_en?has_content>
                                <h4><b>英文摘要</b></h4>
                                <p class="fb-sub-heading">${project.summary_en}</p>
                            </#if>
                        </div>
                    </div>
                </div>
                <!-- END 项目摘要 -->

                <!-- 项目成果  -->
                <div class="panel panel-default">
                    <div class="article-content">
                        <h3>项目成果</h3>
                    </div>
                    <div class="article-content">
                        <table class="display" id="sort-page-table">
                            <thead>
                            <tr>
                                <th>成果名称</th>
                                <th>成果类型</th>
                                <th>成果发表年份</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#list results as result>
                                <tr>
                                    <td>${result.title}</td>
                                    <td>${result.kind}</td>
                                    <td><#if result.time = -1>未知<#else>${result.time?string("##0")}年</#if></td>
                                </tr>
                            </#list>
                            </tbody>
                            <#--                            <tfoot>-->
                            <#--                            <tr>-->
                            <#--                                <th>成果名称</th>-->
                            <#--                                <th>成果类型</th>-->
                            <#--                                <th>成果发表年份</th>-->
                            <#--                            </tr>-->
                            <#--                            </tfoot>-->
                        </table>
                    </div>
                </div>
                <!-- END 项目成果 -->
            </div>

        </div>

        <!-- SIDEBAR STUFF -->
        <div class="col-md-5 padding-20">
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="article-heading">
                        项目的追踪情况
                    </div>
                    <hr class="style-three">
                    <div class="fat-content-small padding-left-10">
                        <div id="traceProject"></div>
                    </div>
                </div>
            </div>

            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="article-heading">
                        产生成果的趋势分析
                    </div>
                    <hr class="style-three">
                    <div class="fat-content-small padding-left-10">
                        <div id="trendProject"></div>
                    </div>
                </div>
            </div>

            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="article-heading">
                        该学者项目履历
                    </div>
                    <hr class="style-three">
                    <div class="fat-content-small padding-left-10">
                        <div class="margin-bottom-20" id="researcher-resume">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END SIDEBAR STUFF -->
    </div>
</div>
<!-- END MAIN SECTION -->

<!-- LOADING MAIN JAVASCRIPT -->
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/main.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src='../js/jquery.okayNav.js'></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/dataTool.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script>
    let categories = [
        {"name": "当前项目"},
        {"name": "纵向项目"},
        {"name": "期刊论文"},
        {"name": "会议论文"},
        {"name": "科研奖励"},
        {"name": "专利"},
        {"name": "学术专著"}
    ]
    let nodes = []
    let links = []
    let legendData = [];
    let series = [];
    let Axis = [];
    let traceChart = echarts.init(document.getElementById("traceProject"))
    let trendChart = echarts.init(document.getElementById("trendProject"))
    $.ajax({
        type: "get",
        url: "/scidata/project/trace/" + "${project.approval}",
        beforeSend: function () {
            traceChart.showLoading()
        },
        success: function (res) {
            let ret = res['links']
            nodes = res['nodes']
            for (let i = 0; i < ret.length; i++) {
                links.push({
                    "source": ret[i][0],
                    "target": ret[i][1],
                })
            }
            traceChart.hideLoading()
            traceChart.setOption(
                {
                    tooltip: {},
                    legend: [
                        {
                            // selectedMode: 'single',
                            data: categories.map(function (a) {
                                return a.name;
                            })
                        }
                    ],
                    series: [
                        {
                            type: 'graph',
                            layout: 'force',
                            force: {
                                repulsion: 100,
                                gravity: 0.5,
                                edgeLength: [10, 50],
                                layoutAnimation: false
                            },
                            edgeSymbol: ['none', 'arrow'],
                            data: nodes,
                            links: links,
                            categories: categories,
                            roam: true,
                            label: {
                                position: 'left',
                                // formatter: '{b}'
                            },
                            lineStyle: {
                                color: '#000000',
                                width: 2
                            },
                        }
                    ]
                }
            )
        }
    })

    $.ajax({
        type: "get",
        url: "/scidata/project/trend/" + "${project.approval}",
        beforeSend: function () {
            trendChart.showLoading()
        },
        success: function (res) {
            legendData = res['legend']
            Axis = res['x']
            let max_y = 0
            for (let item in res['trend']) {
                let dic = {};
                dic["name"] = item;
                dic["data"] = res['trend'][item];
                for (let i = 0; i < res['trend'][item].length; i++) {
                    if (res['trend'][item][i] > max_y) {
                        max_y = res['trend'][item][i]
                    }
                }
                dic["type"] = "bar";
                // dic["barWidth"] = 30;
                dic["tiled"] = "总量";
                dic["smooth"] = "true";
                dic["barMaxWidth"] = 70;
                series.push(dic);
            }
            trendChart.hideLoading()
            trendChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: legendData,
                },
                toolbox: {
                    left: 'right',
                    feature: {
                        saveAsImage: {},
                        restore: {},
                        magicType: {
                            type: ['line', 'bar']
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '时间',
                        type: 'category',
                        data: Axis
                    }
                ],
                yAxis: [
                    {
                        name: '成果数量',
                        type: 'value',
                        max: max_y
                    }
                ],
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        height: "15px",
                        xAxisIndex: [0]
                    }
                ],
                series: series
            })
        }
    })

    $.ajax({
        type: "get",
        url: "/scidata/project/researcher/projects/" + "${project.approval}",
        success: function (res) {
            let ret = {}
            Object.assign(ret, res)
            let elem = ""
            for (let key in ret) {
                elem += "<div class=\"fat-heading-abb\">"
                elem += "<i class=\"fa fa-calendar\"></i>" + key + "年"
                elem += "</div>"
                elem += "<div class=\"fat-content-small padding-left-30\">"
                elem += "<ul>"
                for (let i = 0; i < ret[key].length; i++) {
                    elem += "<li>"
                    elem += "<div class=\"panel panel-default\">"
                    elem += "<div class=\"resume-heading\">"
                    elem += "<a href=\"/scidata/project?id=" + ret[key][i]["approval"] + "\">" + ret[key][i]["title"] + "</a>"
                    elem += "</div>"
                    elem += "<div class=\"article-info fixer\">"
                    elem += "<div class=\"art-category\">"
                    elem += "<i class=\"fa fa-folder-o\"></i>" + ret[key][i]["funding"]
                    elem += "</div>"
                    elem += "<div class=\"art-comments\">"
                    elem += "<i class=\"fa fa-dollar\"></i>" + ret[key][i]["money"] + "万"
                    elem += "</div>"
                    elem += "<div class=\"art-date\">"
                    elem += "<i class=\"fa fa-calendar-o\"></i>"
                    let origin = String(ret[key][i]["origin"])
                    let deadline = String(ret[key][i]["deadline"])
                    elem += origin.substring(0, 4) + "年" + origin.substring(5, 6) + "月-" + deadline.substring(0, 4) + "年" + deadline.substring(5, 6) + "月"
                    elem += "</div>"
                    elem += "</div>"
                    elem += "</li>"
                }
                elem += "</ul>"
                elem += "</div>"
            }

            let ref = document.getElementById("researcher-resume")
            ref.innerHTML = elem
        }
    })
</script>
<script>
    $(document).ready(function () {
        $("#sort-page-table").DataTable(
            {
                "columnDefs": [{
                    "searchable": true,
                    "orderable": true,
                    "targets": 0
                }],
                "order": [[1, 'asc']]
            }
        )
        // $("#sort-page-table tfoot th").each(function () {
        //     let title = $(this).text();
        //     $(this).html('<input type="text" placeholder="搜索' + title + '" />');
        // })
    })

    function search() {
        let keyword = document.getElementById("keyword-detail").value
        if (keyword === "" || keyword === undefined || keyword === null || keyword.trim() === "") {
            // window.location.reload()
            alert('输入关键词不能为空');
            return
        }

        window.location.replace("/scidata/project/search?keyword=" + keyword)
    }
</script>
</body>
</html>